<template>
  <div>
    
    <div class="chain-link-bar-wrapper">
  		<el-breadcrumb separator-class="el-icon-arrow-right">
	  		<el-breadcrumb-item>工厂管理</el-breadcrumb-item>
	  		<el-breadcrumb-item to="/company/authList">工厂认证列表</el-breadcrumb-item>
	  	</el-breadcrumb>  
	  </div>

  

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>工厂认证列表</span>

      </div>

      <div class="app-diliver-10"></div>

      <div class="clearfix app-tabs-wrapper color-black-third">
        <span 
          :class="{'color-theme': page.checkStatus == ''}" 
          class="app-tab app-margin-r-40" 
          @click="selectTabStatus('')"
          >全部</span>
        <span 
          :class="{'color-theme': page.checkStatus == 'NOT'}" 
          class="app-tab app-margin-r-40" 
          @click="selectTabStatus('NOT')"
          >未审核</span>
        <span 
          :class="{'color-theme': page.checkStatus == 'ING'}" 
          class="app-tab app-margin-r-40" 
          @click="selectTabStatus('ING')"
          >审核中</span>
        <span 
          :class="{'color-theme': page.checkStatus == 'PASS'}" 
          class="app-tab app-margin-r-40"
          @click="selectTabStatus('PASS')"
          >审核通过</span>
        <span 
          :class="{'color-theme': page.checkStatus == 'FAIL'}" 
          class="app-tab app-margin-r-40"
          @click="selectTabStatus('FAIL')"
          >不通过</span>
      </div>

      <div class="app-diliver-15"></div>
      <div class="app-diliver-15"></div>

      <div>
        <div class="app-display-inline app-margin-h-20">
          <span class="color-black-second font-size-text">关键字：</span>
          <el-input
            clearable
            placeholder="公司名 公司电话 会员手机"
            v-model="page.keyWord"
            style="width: 380px;"
              ></el-input>
        </div>

        <div class="app-display-inline app-margin-h-20">
          <SubmitButton
            type="primary" 
            plain
            icon="el-icon-search"
            :post-option="{
              url: searchUrl,
              data: page,
              callback: searchCB
            }"
            >搜索</SubmitButton>
        </div>
      </div>

      <div class="app-diliver-15"></div>
      <div class="app-diliver-15"></div>
      
      <el-table :data="companyList" stripe border style="width: 100%" @sort-change="sortMethod" class="nc-table-btn-ctrl">
        <el-table-column type="index" :index="indexMethod">
        </el-table-column>
        
        <el-table-column
          label="公司"
          >
          <template slot-scope="scope">
            <span>{{scope.row.name}}</span>
          </template>
        </el-table-column>

        <el-table-column
          label="会员"
          width="260"
          >
          <template slot-scope="scope">
            <span>{{scope.row.real_name}}</span>
            <br>
            <span v-if="role > 1">{{ scope.row.phone }}</span>
            <span v-else>{{ scope.row.phone.substring(0,3) }}********</span>
          </template>
        </el-table-column>

        <el-table-column label="审核说明" sortable="custom" prop="check_status_explain"/>
		<el-table-column label="申请时间" sortable="custom" prop="add_time"/>
		<el-table-column label="认证时间" sortable="custom" prop="check_date_time" />
        <el-table-column
          label="认证图片">
          <template slot-scope="scope">
            <el-image style="width: 100px; max-height: 100px; margin: 5px;" :preview-src-list="scope.row.imageList" v-if="scope.row.imageList != null" v-for="authImage in scope.row.imageList" :src="authImage" />
          </template>
        </el-table-column>
        <el-table-column label="操作人" prop="operator" width="100"/>
        <el-table-column label="操作时间" prop="operator_time" width="100"/>
        <el-table-column label="审核状态" prop="check_status" sortable="custom">
          <template slot-scope="scope">
            <span class="text-bold color-warning" v-if="scope.row.check_status == 'NOT'">待审核</span>
            <span class="text-bold color-theme" v-if="scope.row.check_status == 'ING'">审核中</span>
            <span class="text-bold color-success" v-if="scope.row.check_status == 'PASS'">通过</span>
            <span class="text-bold color-danger" v-if="scope.row.check_status == 'FAIL'">未通过</span>
            <span v-if="scope.row.check_status_explain != null">
              <br>
              {{scope.row.check_status_explain}}
            </span>
          </template>
        </el-table-column>

        <el-table-column
          label="操作"
          width="260">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.check_status == 'NOT'"
              type="primary" 
              plain 
              size="mini" 
              @click="checkStatusHandle(scope.row.account_id, 1)">审核中</el-button>
            <el-button
              v-if="scope.row.check_status == 'ING' || scope.row.check_status == 'PASS'"
              type="warning" 
              plain 
              size="mini" 
              @click="checkStatusHandle(scope.row.account_id, 2)">不通过</el-button>
            <el-button
              v-if="scope.row.check_status == 'ING' || scope.row.check_status == 'FAIL'"
              type="success" 
              plain 
              size="mini" 
              @click="checkStatusHandle(scope.row.account_id, 3)">审核通过</el-button>
            <a class="" :href="'#/company/authDetail/' + scope.row.account_id" target="_blank">
              <el-button
              plain 
              size="mini" 
              >详情</el-button>
            </a>
          </template>
        </el-table-column>
      </el-table>


      <div class="pager-bar-wrapper">
        <el-pagination
          background
          layout="prev, pager, next, total"
          :total="page.totalRow"
          :page-size="page.pageSize"
          :current-page="page.pageNum"
          @current-change="pageNumChange"
          @prev-click="pageNumChange"
          @next-click="pageNumChange"
          @size-change="pageSizeChange"
          >
        </el-pagination>
      </div>

    </el-card>	

    <CheckStatusEdit :is-show="checkStatusEditVisible" :auth-obj="editCompany" :check-yes="checkYes"></CheckStatusEdit>

  </div>
</template>


<script>

  import NcButton from '../common/NcButton'
  import SubmitButton from '../common/SubmitButton'
  
  import CheckStatusEdit from './CheckStatusEditDialog'

  import Api from '../../api/Api'
  import CompanyApi from '../../api/CompanyApi'

  import JsonKit from '../../kit/JsonKit'

  import { mapGetters } from 'vuex'
  //需要导入vuex的数据管理
  import Store from '../../store/index.js'

  export default {
  	components: {
  		NcButton, SubmitButton, CheckStatusEdit
  	},
  	data(){
  	  return {
  	  	
        companyList: [],

        page: {
          checkStatus: '',
          keyWord: '',
          pageNum: 1,
          pageSize: 10
        },

        checkStatusEditVisible: false,
        checkYes: 0,
        editCompany: {},

        searchUrl: CompanyApi.URL_AUTH_LIST,
		
		role:''
  	  }
  	},
  	computed: {
  	  ...mapGetters(['hasPerm'])
  	},
  	created(){
  	  this.getPage();

      this.$root.eventHub.$on('closeEditDialog', this.hideEditDialog);
	  this.role = Store.state.user.role;
  	},
    beforeDestroy: function(){
      this.$root.eventHub.$off('closeEditDialog', this.hideEditDialog);
    },
  	methods: {
      sortMethod(column) {
        this.page.columnProp = column.prop;
        this.page.columnOrder = column.order;
        this.getPage();
      },
      searchCB(json){
        this.companyList = json.list;
        this.setPage(json);
      },
      getPage(){
        CompanyApi.authList(this.page, json=>{
          this.companyList = json.list;
          this.setPage(json);
		  console.log(json)
        });  
      },
      pageNumChange(pageNum){
        this.page.pageNum = pageNum;
        this.getPage();
      },
      pageSizeChange(pageSize){
        this.page.pageSize = pageSize;
        this.getPage();
      },
      setPage(json){
        this.page.pageNum = json.pageNum;
        this.page.pageSize = json.pageSize;
        this.page.totalRow = json.totalRow;
      },
      indexMethod(index){
        return index + 1 + (this.page.pageNum - 1) * this.page.pageSize
      },
      selectTabStatus(checkStatus){
        this.page.checkStatus = checkStatus;
        this.page.pageNum = 1;
        this.getPage();
      },
      checkStatusHandle(accountId, checkYes){
        this.editCompany = JsonKit.getOf(this.companyList, 'account_id', accountId, null);
        this.checkYes = checkYes;
        this.checkStatusEditVisible = true;
      },
      hideEditDialog(isSuccess){
        this.checkStatusEditVisible = false;
        this.editCompany = {};

        if (isSuccess) {
          this.getPage();
        }
      },
  	}
  }
</script>
